<template>
	<v-chart :option="chartOptions" autoresize style="height: 300px;" />
</template>

<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts' // ✅ 完整导入

const props = defineProps({ data: Object })

const chartOptions = computed(() => ({
	title: { text: '各区域能耗排行' },
	tooltip: { trigger: 'axis' },
	grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
	xAxis: {
		type: 'category',
		data: props.data?.labels || []
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			name: '用电',
			type: 'bar',
			barWidth: '40%',
			data: props.data?.values || []
		}
	]
}))
</script>
